<template>
    <div>

       <div v-if="!dialogVisible">
            <el-form :model="formData" :rules="rules" ref="formData" label-width="90px">
                    <el-form-item label="安检名称:" prop="securityCheckName" style="width:300px">
                        <el-input size="mini"  v-model="formData.securityCheckName" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="安检员:" prop="creatorId" style="width:300px">
                        <el-select size="mini" 
                          v-model="formData.creatorId" 
                           clearable 
                           filterable
                           placeholder="请选择">
                            <el-option
                            v-for="item in userList"
                            :key="item.id"
                            :label="item.staffName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="安检周期:"  prop="securityCheckCycle" style="width:300px">
                        <el-select size="mini" 
                            v-model="formData.securityCheckCycle" placeholder="请选择">
                            <el-option
                            v-for="item in [{label:'年度',value:'1'},{label:'临时',value:'2'}]"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
            </el-form>
              <div style="font-size:16px;padding:10px 0;text-align: left;">安检范围
                <i class="el-icon-menu" @click="btnList" style="font-size: 18px; cursor: pointer;" /></div>
              <el-table
                :data="formData.cusDoorNoGasList"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}"
                style="width: 100%;">
               <el-table-column v-if="!selection"
                    prop="date"
                    align="center"
                    width="60"
                    label="序号">
                     <template slot-scope="scope">
                         {{scope.$index+1}}
                     </template>
                </el-table-column>
                <el-table-column         
                    prop="customerName" 
                     align="center"
                    label="姓名"
                   />
                 <el-table-column         
                    prop="customerPhone" 
                     align="center"
                    label="电话"
                   />
                    <el-table-column         
                    prop="customerCateName" 
                     align="center"
                    label="客户类型"
                   />
                   <el-table-column         
                    prop="areaId" 
                     align="center"
                    label="区域"
                   />
                   <el-table-column         
                    prop="address" 
                     align="center"
                    label="小区名称"
                   />
                   <el-table-column         
                    prop="building" 
                     align="center"
                    label="楼栋"
                   />
                   <el-table-column         
                    prop="unit" 
                     align="center"
                    label="单元"
                   />
                   <el-table-column         
                    prop="houseNo" 
                     align="center"
                    label="门牌号"
                   />
                   <el-table-column         
                    prop="doorNo" 
                     align="center"
                    label="户号"
                   />
                   <el-table-column         
                    prop="meterNo" 
                     align="center"
                    label="气表表号"
                   />
                  <el-table-column         
                    prop="meterNo" 
                     align="center"
                    label="删除"
                   >
                   <template slot-scope="scope">
                      <el-button type="danger"  class="el-icon-delete" @click="btnDel(scope.$index)"></el-button>
                   </template>
                  </el-table-column>
            </el-table>
              <el-form  label-width="60px" style="margin-top:20px">
             <el-form-item label="备注:" style="width:500px">
                  <el-input
                  v-model="formData.remark"
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容">
                  </el-input>
              </el-form-item>
          </el-form>
        <span  slot="footer" class="dialog-footer">
            <el-button type="primary" @click="btnSave">保存</el-button>
            <el-button @click="btnClose">取 消</el-button>
        </span >
       </div>
       <div  v-if="dialogVisible">
          <taskList @save="getData" @close="btnClose" />
       </div>
    </div>
</template>
<script>
 import  {userList,findCusSecurityCheckTaskList,insertCusSecurityCheck}  from '@/api/user'
 import taskList from '../taskpop'
  export default {
    components:{
      taskList
    },
    data() {
      return {
       userList:[], 
       formData:{
          creatorId:'',
          securityCheckName:'',
          securityCheckCycle:'',
          remark:'',
          cusDoorNoGasList:[],
        },
        rules: {
            creatorId: [ { required: true, message: '此项不能为空', trigger: 'blur' }],
            securityCheckName: [ { required: true, message: '此项不能为空', trigger: 'blur' }],
            securityCheckCycle: [ { required: true, message: '此项不能为空', trigger: 'blur' }],
          },
          dialogVisible:false
      }
    },
    mounted(){
       this.getUserList()
    },
    methods: {
     getUserList(){
          userList({
             data:{},
             page: 1,
            pageSize:999
          }).then((res)=>{
             this.userList = res.data.data
          })
     },
     btnSave(){
        this.$refs['formData'].validate((valid) => {
           console.log(valid,this.formData)
          if (valid) {
            console.log(valid)
                insertCusSecurityCheck(this.formData).then((res)=>{
             
               })
          } else {
            return false;
          }
        })
     },
     btnList(){
       this.dialogVisible = true
     },
     getData(data){
        this.formData.cusDoorNoGasList =this.formData.cusDoorNoGasList.concat(data) 
        this.dialogVisible = false
     },
     btnClose(){
       this.dialogVisible = false
     },
     btnDel(index){
        this.formData.cusDoorNoGasList.splice(index,1)
     }
    }
  }
</script>
<style scoped>
.el-form{
  display: flex;
  flex-wrap: wrap;
  justify-content:flex-start;
}
.el-form-item__label{
    color: #666;
    font-weight: normal;
}
.box-view{
    text-align: center;
}
</style>